<template>
    <div class="online-box" :style="{ top: top, left: left }">
        <div class="online-top">
            在线咨询
        </div>
        <div class="show-contact-box">
            <template v-if="userStore.qqZiXun.length">
                <div class="show-contact-type">
                    <div class="show-contact-type-icon"> <img src="~@/assets/images/qq-icon.png" alt=""> </div>
                    <div class="show-contact-type-label">QQ咨询</div>
                </div>
                <div class="show-qq-number">
                    <p v-for="(item, index) in userStore.qqZiXun" :key="index"><a :href="'http://wpa.qq.com/msgrd?v=3&uin='+item[1]+'&&site=qq&menu=yes'" target="_blank">{{item[0]}}：{{item[1]}}</a></p>
                </div>
            </template>
            
            <template v-if="userStore.websiteInfo?.weixinZiXun?.length">
                <div class="show-contact-type">
                    <div class="show-contact-type-icon"> <img src="~@/assets/images/wx-icon.png" alt=""> </div>
                    <div class="show-contact-type-label">微信咨询</div>
                </div>
                <div class="show-wx-qr-code">
                    <img :src="userStore.websiteInfo.weixinZiXun[0]" alt="">
                </div>
            </template>
            
            <div class="service-desc" v-html="userStore.websiteInfo.serviceTime">
                
            </div>
        </div>
    </div>
</template>

<script setup>
import useUserStore from '@/store/modules/user'
const userStore = useUserStore();

defineProps({
    top: {
        type: String,
        default: 0
    },
    left: {
        type: String,
        default: 0
    }
})

</script>


<style lang="scss" scoped>
.online-box {
    position: absolute;
    z-index: 10;
    width: 180px;
    height: auto;
    border: 1px solid rgba(233, 233, 233, 1);
    border-radius: 8px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.03);
    background: rgba(255, 255, 255, 1);

    .online-top {
        background-image: url("@/assets/images/on-line-top.png");
        width: 100%;
        height: 60px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
        line-height: 60px;
        color: rgba(255, 255, 255, 1);
        font-size: 18px;
        font-weight: 600;
    }

    .show-contact-box {
        padding: 10px 16px 16px;

        .show-contact-type {
            display: flex;
            align-items: center;
            width: 158px;
            height: 40px;
            padding: 0 16px;
            border-radius: 20px;
            background: rgba(244, 247, 255, 1);

            .show-contact-type-icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }

            .show-contact-type-label {
                color: rgba(5, 11, 32, 1);
                font-size: 16px;
                font-weight: 500;
                line-height: 30px;
            }

        }

        .show-qq-number {
            color: rgba(5, 11, 32, 1);
            font-size: 14px;
            font-weight: 500;
            line-height: 28px;
            margin: 8px 0;
        }

        .show-wx-qr-code {
            margin: 16px auto;
            width: 140px;
            height: 140px;
        }

        .service-desc {
            color: rgba(5, 11, 32, 1);
            font-size: 13px;
            font-weight: 400;
            line-height: 20px;
        }
    }
}
</style>